<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>Class 与 Style 绑定</h2>

        <p class="static" v-bind:class="{active:isActive, 'text-danger':hasError}">动态绑定v-bind:class</p>

        <p v-bind:class="[isActive ? 'text-danger' : '', activeClass, errorClass]">数组传级v-bind:class</p>

        <p v-bind:style="{color: activeColor, fontSize: fontsize}">v-bind:style</p>

        <p v-bind:style="styleObject">style绑定一个对象</p>

        <h2>条件渲染</h2>

        <p v-if="ok">Yes</p>
        <p v-else>No</p>

        <template v-if="ok">
            <ul>
                <li v-if="Math.random() > 0.5">Paragraph 1</li>
                <li>Paragraph 2</li>
                <li>Paragraph 3</li>
            </ul>
        </template>

        <div v-if="type==='A'">A</div>
        <div v-else-if="type==='B'">B</div>
        <div v-else>AB</div>
        
        <hr>
        <h2>切换用户登录，而不重置用户的输入,若区分，使用key</h2>

        <template v-if="loginType==true">
            <label for="">Username</label>
            <!-- <input type="text" placeholder="Enter your username" key="username-input"> -->
            <input type="text" placeholder="Enter your username">
        </template>
        <template v-else>
            <label for="">Email</label>
            <!-- <input type="text" placeholder="Enter your email address" key="email-input"> -->
            <input type="text" placeholder="Enter your email address">
        </template>
        <button @click="changeType">切换输入方式</button>


        <h2>列表渲染——用v-for把一个数组对应为一组元素; of可替代in 更接近javascript迭代器的语法</h2>

        <ul v-for="(item, index) of items" :key="index">
            <li>{{index + 1}} - {{item.message}}</li>
        </ul>
        
        <ul>
            <li v-for="(value,key) in objects">
                {{key}}:{{value}}
            </li>
        </ul>





    </div>
    
    <script src="20180718.js"></script>
</body>
</html>